import React from "react"
import PropTypes from "prop-types"
import { observer, inject } from "mobx-react"
import { newStShare, setShare } from "../utils/wxShare"
import Index from "./index/index"
import ThemePage from "./themePage/themePage"
import Upload from "./upload/upload"
import Note from "./note/note"
import Loading from "../components/loading/loading"
import LoadingPop from "../components/pops/loadingPop"
import ErrPop from "../components/pops/errorPop"
import NotWx from "../pages/notWx/noteWx"
import "./home.scss"

@inject("CommonStore", "UserStore")
@observer
class StartUp extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {
      isWx: true,
    }
  }
  componentWillMount() {
    this.setState({
      isWx: this.isWeiXin(),
      // isWx: true,
    })
  }
  componentWillUpdate() {}
  componentDidUpdate() {
    window.scrollTo(0, 0)
  }
  componentDidMount() {
    document.body.scrollTop = 0
    let options = {
      title: "布鲁可漫游闵行创意拼搭大赛邀你来参加",
      desc: "3000元现金奖金和价值5000元布鲁可积木大礼包等你来挑战！",
      link: "https://h5.putao.com/paibloksshow/#/index",
      imgUrl: "https://h5.putao.com/minhang/icon.jpg",
    }
    setShare(options)
    // setShare 为凤阳要求的分享方法
    // newStShare()
    // newStShare  董磊写的分享方法
  }
  componentWillUnmount() {}
  isWeiXin() {
    var ua = window.navigator.userAgent.toLowerCase()
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
      return true
    } else {
      return false
    }
  }

  changePage = (page) => {
    this.props.UserStore.changeValus("repeatUploadFlag", false)
    console.log()
    this.props.history.push({ pathname: page })
  }
  render() {
    let pagepath = this.props.match.path.replace("/", "")
    let checkpage
    if (pagepath === "") {
      checkpage = "index"
    } else {
      checkpage = pagepath
    }

    let item = (page, text) => (
      <div
        className={checkpage === page ? "bottom-item check" : "bottom-item"}
        onClick={() => this.changePage(page)}
      >
        <img
          className="item-img"
          src={
            checkpage === page
              ? require(`../static/bottomBtn/${page}_check.png`)
              : require(`../static/bottomBtn/${page}.png`)
          }
          alt=""
        />
        <p className="item-text">{text}</p>
      </div>
    )
    return (
      <div>
        {this.state.isWx ? (
          <div>
            <ErrPop />
            {this.props.UserStore.isPostOrGetData && <LoadingPop />}
            {this.props.UserStore.firstLoading ? (
              <Loading />
            ) : (
              <div>
                <div className="page-container">
                  {checkpage === "index" ? <Index /> : null}
                  {checkpage === "themePage" ? <ThemePage /> : null}
                  {checkpage === "upload" ? <Upload /> : null}
                  {checkpage === "note" ? <Note /> : null}
                </div>
                <div className="bottom-area">
                  {item("index", "活动介绍")}
                  {item("themePage", "构建主题")}
                  {item("upload", "作品上传")}
                  {item("note", "活动信息")}
                </div>
              </div>
            )}
          </div>
        ) : (
          <NotWx />
        )}
      </div>
    )
  }
}

export default StartUp
